<template>
    <div class="tree-folder">
        <div class="tree-folder-name" :class="{'active' : show }" @click="show = !show">
            <i class="el-icon-arrow-right"></i>
            <span>{{folder.title}}</span>
            <i class="el-icon-download" @click.stop="downloadSingleFile(folder)"></i>
        </div>
        <transition name="fade">
            <div class="tree-folder-children" v-if="show">
                <file v-for="item in folder.children" :file="item" :key="item.id"></file>
            </div>
        </transition>
    </div>
</template>

<script>
import file from './file.vue'

export default {
    components: {
        file
    },
    props: ['folder'],
    data() {
        return {
            show: false
        }
    },
    methods: {
        hideFolder() {
            this.show = false;
        },
        downloadSingleFile(folder) {
            var code = this.$bus.renderSingleFile(folder);
            var BLOB = new Blob([code.str], { type: zip.getMimeType(code.key + '.js') });
            var blobURL = URL.createObjectURL(BLOB);
            var anchor = document.createElement("a");
            var clickEvent = new MouseEvent("click");
            anchor.href = blobURL;
            anchor.download = code.key + '.js';
            anchor.dispatchEvent(clickEvent);
        }
    },
    mounted() {
        this.$bus.$on('hideAllFolder', this.hideFolder)
    },
    destroyed() {
        this.$bus.$off('hideAllFolder', this.hideFolder)
    }
}
</script>

<style>
</style>